<template>
  <div :class="['article-item-image', radiusArrow]">
    <router-link
      :to="{ path: '/articleDetail', query: { articleId: 1 } }"
      class="article-item-image-link"
    >
      <el-image :src="articleImg" fit="contain" :class="radiusArrow">
        <template #error>
          <div class="image-slot">
            <i class="el-icon-picture-outline"></i>
          </div>
        </template>
      </el-image>
    </router-link>
  </div>
</template>

<script>
export default {
  name: "ArticleItemImage",
  props: {
    arrow: {
      type: String,
      required: true,
    },
  },
  data() {
    return {
      articleImg: "/article.png",
    };
  },
  computed: {
    radiusArrow() {
      if (this.arrow === "left") {
        return "is-left";
      } else {
        return "is-right";
      }
    },
  },
};
</script>

<style lang="stylus" scoped>
.article-item-image {
  width: 40%;
}

.article-item-image-link {
  height: 100%;
}

.el-image {
  height: 100%;
}

.is-left {
  text-align: left;
  border-radius: 0.1rem 0 0 0.1rem;
}

.is-right {
  text-align: right;
  border-radius: 0 0.1rem 0.1rem 0;
}

.el-image >>> img {
  transition: all 1s;
}
</style>